<template>
	<view class="modle" v-if="showPicker" @click.stop="toRemove">
		<view class="content">
			<view class="btn">
				<view @click.stop="toRemove">取消</view>
				<view v-if="showDatetimePicker">
					<uni-datetime-picker v-model="range" type="daterange" :end="page == 'statistics' ? currentdate : ''" @change="toChangeDate"
						@click.stop="toConfirm">确定</uni-datetime-picker>
				</view>
				<view v-else @click.stop="toConfirm">确定</view>
			</view>
			<picker-view indicator-class='pickerCol'
				:value="pickerKey == 'multiVal' ? multiVal : pickerKey == 'oneKey' ? oneKey : pickerKey == 'twoKey' ? twoKey : pickerKey == 'threeKey' ? threeKey : pickerKey == 'fourKey' ?
					fourKey : pickerKey == 'timeKey' ? timeKey : pickerKey == 'campusKey' ? campusKey : pickerKey == 'periodKey' ? periodKey : pickerKey == 'gradeKey' ?
						gradeKey : pickerKey == 'subjectKey' ? subjectKey : pickerKey == 'momemtKey' ? momemtKey : pickerKey == 'sortKey' ? sortKey : pickerKey == 'classKey' ? classKey: pickerKey == 'statusKey'
            ? statusKey : pickerKey == 'semesterKey' ? semesterKey : [0]"
				bindchange="bindPickerChange" class="picker-view" @change="bindChange">
				<template v-if="!multiSelector">
					<!-- 单列 -->
					<picker-view-column>
						<view class="item" v-for=" ( item, index )  in   pickerList  " :key="index">{{ item.name }}</view>
					</picker-view-column>
				</template>
				<template v-else>
					<!-- 多列 现在是普通的平铺  实际上应该是树的形式数据  后期修改 -->
					<picker-view-column v-for="(item, index) in pickerList" :key="index">
						<view class="item" v-for=" ( item2, index2 )  in   item  ">{{ item2.name }}</view>
					</picker-view-column>
				</template>
			</picker-view>

		</view>
	</view>
</template>
<script>
import {
	defineComponent,
	reactive,
	toRefs,
	getCurrentInstance,
	onMounted,
} from "vue";
import moment from "moment";
export default defineComponent({
	name: "Picker",
	components: {},
	props: {
		// 多列状态下的选择值
		multiVal: {
			type: Array,
			default: [],
		},
		// key1
		oneKey: {
			type: Array,
			default: [],
		},
		// key2
		twoKey: {
			type: Array,
			default: [],
		},
		// key3
		threeKey: {
			type: Array,
			default: [],
		},
		// key4
		fourKey: {
			type: Array,
			default: [],
		},
		// 时间key
		timeKey: {
			type: Array,
			default: [],
		},
		// 学校
		campusKey: {
			type: Array,
			default: [],
		},
		// 学段
		periodKey: {
			type: Array,
			default: [],
		},
		// 年级
		gradeKey: {
			type: Array,
			default: [],
		},
		// 班级
		classKey: {
			type: Array,
			default: [],
		},
		// 科目
		subjectKey: {
			type: Array,
			default: [],
		},
		// 时间 30天和最近--学情二期
		momemtKey: {
			type: Array,
			default: [],
		},
		// 升序降序 学生姓名排序
		sortKey: {
			type: Array,
			default: [],
		},
		// 学期排序--综合评价
		semesterKey: {
			type: Array,
			default: [],
		},
		pickerList: {
			type: Array,
			default: [],
		},
		pickerKey: {
			type: String,
			default: '',
		},
		showPicker: {
			type: Boolean,
			default: false,
		},
		multiSelector: {
			type: Boolean,
			default: false, // 是否为多列选择器 多列选择器的情况下 pickerList 为二维数组
		},
		page: {
      type: String,
      default: "", //是否从其他页面（主要针对日期选择）
    },
    statusKey: {
      type: Array,
      default: [],
    },
    currentdate: {
      type: String,
      default: "", //限制自定义选择日期(不能选择今日及以后)
    },
	},
	setup(props, {
		emit
	}) {
		// console.log(props.subjectKey,111);
		const {
			proxy
		} = getCurrentInstance();
		const state = reactive({
			showDatetimePicker: false, //显示日期选择器
			range: [moment().format("YYYY-MM-DD"), moment().format("YYYY-MM-DD")],
			multiVal: props.multiVal, //多列状态下的数据
			oneKey: props.oneKey, //1数据
			twoKey: props.twoKey, //2数据
			threeKey: props.threeKey, //3数据
			fourKey: props.fourKey, //4数据
			timeKey: props.timeKey, //时间数据
			campusKey: props.campusKey, //班级管理切换数据
			periodKey: props.periodKey, //班级管理切换数据
			gradeKey: props.gradeKey, //班级管理切换数据
			classKey: props.classKey, //班级管理切换数据
			subjectKey: props.subjectKey, //科目
			momemtKey: props.momemtKey, //时间
			sortKey: props.sortKey, //排序
			semesterKey: props.semesterKey, //学期
			pickerKey: props.pickerKey, //key值
			pickerList: props.pickerList, //传递过来的列表
			showPicker: props.showPicker, //显示状态
			selected: [0],
			page: props.page, //是否从其他页面（主要针对日期选择）
      statusKey: props.statusKey, //状态
			years: [
				2000, 2001, 2002, 2003, 2004
			]
		})
		onMounted(() => {
			state.selected = state.pickerKey == 'multiVal' ? state.multiVal : state.pickerKey == 'oneKey' ? state
				.oneKey : state.pickerKey == 'twoKey' ? state
					.twoKey : state.pickerKey == 'threeKey' ? state.threeKey : state.pickerKey == 'fourKey' ? state
						.fourKey : state.pickerKey == 'timeKey' ? state.timeKey : state.pickerKey == 'campusKey' ? state
							.campusKey : state.pickerKey == 'periodKey' ? state.periodKey : state.pickerKey == 'gradeKey' ?
								state.gradeKey : state.pickerKey == 'subjectKey' ? state.subjectKey : state.pickerKey == 'momemtKey' ?
									state.momemtKey : state.pickerKey == 'sortKey' ? state.sortKey: state.pickerKey == "statusKey"
          ? state.statusKey : state.pickerKey == 'classKey' ?
										state.classKey : state.pickerKey == 'semesterKey' ? state.semesterKey : [0]
			// console.log('periodKey', state.selected);
		});
		const bindChange = (e) => {
			state.selected = e.detail.value
			// 判断时间选择器是否显示
			if (state.selected != -1 && state.pickerKey == "timeKey" && state.pickerList[state.selected[0]]?.name ==
				'自定义') {
				state.showDatetimePicker = true
			} else {
				state.showDatetimePicker = false
			}
		}
		const toRemove = () => {
			emit('onClose')
		}
		// 确定
		const toConfirm = () => {

			// 如果不是选时间，且不是自定义时触发关闭
			if (state.pickerKey != "timeKey" || (state.pickerKey == "timeKey" && state.pickerList[state.selected[0]]
				?.name != '自定义' && state.selected[0] != 1&&
          state.page != "statistics")||
        (state.pickerKey == "timeKey" &&
          state.pickerList[state.selected[0]]?.name != "自定义" &&
          state.selected[0] != 2 &&
          state.page == "statistics")) {
				let time = ''
				if (state.pickerKey == "timeKey" && state.selected[0] == 2) {
					time = state.pickerList[state.selected[0]].name
				} else {
					time = ''
				}
				emit('onChange', state.selected, state.pickerKey, state.pickerList, time)
				emit('onClose')
			}

		}
		//选择时间
		const toChangeDate = (val) => {
			let time = val[0] + ' ~ ' + val[1]
			// 添加选择时间列表
			state.pickerList[state.selected[0] + 1] = {
				name: time

			}
			if (state.selected[0] != -1 && state.selected[0] != 0 && state.pickerKey == "timeKey" && state.pickerList[
				state.selected[0]]?.name == '自定义') {
				state.showDatetimePicker = true
			} else {
				state.showDatetimePicker = false
			}
			if (state.page != "statistics") {
        state.selected = [2];
      } else {
        state.selected = [3];
      }
			emit('onChange', state.selected, state.pickerKey, state.pickerList, time)
			emit('onClose')
		};
		return {
			...toRefs(state),
			bindChange,
			toRemove,
			toConfirm,
			toChangeDate
		};
	},
});
</script>
<style lang="scss">
$primaryColor: #29ce92;

.picker-view {
	box-sizing: border-box;
	width: 750rpx;
	height: 488rpx;
	// margin-top: 20rpx;
	padding: 0rpx 32rpx;
	margin-top: -130rpx;



	.pickerCol {
		height: 88rpx;
		border-top: 1px solid #C7CACC;
		border-bottom: 1px solid #C7CACC;
	}

	.item {
		line-height: 88rpx;
		text-align: center;
	}
}



.modle {
	position: absolute;
	bottom: 0rpx;
	height: 100vh;
	width: 100%;
	background: rgba(3, 3, 3, 0.2);
	z-index: 9;

	.content {
		border-radius: 16rpx 16rpx 0rpx 0rpx;
		background: #fff;
		position: fixed;
		bottom: 0rpx;
		width: 100%;
		text-align: center;

		.btn {
			height: 128rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #E6E6E6;
			border-radius: 16rpx 16rpx 0rpx 0rpx;
			position: relative;
			background: rgb(255, 255, 255);
			z-index: 99;

			view {
				padding: 0rpx 32rpx;
			}

			view:nth-child(2) {
				color: $primaryColor;
			}
		}

	}

}
</style>